<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初学html</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
</head>
<body>

    <!--任务知识点布置-->
    <div class="layui-card">
        <div class="layui-card-header"><h2>任务知识点</h2></div>
        <div class="layui-card-body">

            <!--面包屑-->
            <!--<span class="layui-breadcrumb" lay-separator="|">-->
                <!--<a href="">娱乐</a>-->
                  <!--<a href="">八卦</a>-->
                  <!--<a href="">体育</a>-->
                  <!--<a href="">搞笑</a>-->
                  <!--<a href="">视频</a>-->
                  <!--<a href="">游戏</a>-->
                  <!--<a href="">综艺</a>-->
            <!--</span>-->

            <!--选项卡-->
            <div class="layui-tab">
                <ul class="layui-tab-title">
                    <li class="layui-this">上传知识点资源文件</li>
                    <li>在线编辑任务知识点</li>

                </ul>
                <div class="layui-tab-content">
                    <!--选项卡的第一个div-->
                    <div class="layui-tab-item layui-show">
                        <button type="button" class="layui-btn" id="upload">
                            <i class="layui-icon">&#xe67c;</i>上传文件
                        </button>

                    </div>
                    <!--选项卡的第二个div-->
                    <div class="layui-tab-item">
                        <form class="layui-form" action="">
                            <!--文本编辑域-->
                            <div class="layui-form-item layui-form-text">
                                <label class="layui-form-label">文本域</label>
                                <div class="layui-input-block">
                                    <textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
                                </div>
                            </div>
                            <!--提交btn-->
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

        </div>
    </div>


    <!--横线-->
    <hr>

    <!-- 任务作业测试题布置-->
    <div class="layui-card">
        <div class="layui-card-header"><h2>任务检测题</h2></div>
        <div class="layui-card-body">

            <!--字段块-->
            <fieldset class="layui-elem-field">
                <legend>预览</legend>
                <div class="layui-field-box">
                    (这里会将题目实时的从数据库中读取出来展现在这里,
                    现在由于技术的原因只是做一个简单的静态界面,来更好的描述想法)
                </div>

            </fieldset>


            <!--字段快-->


            <!--题型选项卡-->
            <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                <ul class="layui-tab-title">
                    <li class="layui-this">添加单选题</li>
                    <li>添加多选题</li>
                    <li>添加判断题</li>
                    <li>添加填空题</li>
                    <li>添加简答题</li>
                </ul>
                <div class="layui-tab-content" >
                    <!--选择题div-->
                    <div class="layui-tab-item layui-show">

                        <form class="layui-form">
                            <div class="layui-form-item">
                                <lable class="layui-form-label">题干:</lable>
                                <div>
                                    <div class="layui-input-block">
                                        <input type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <lable class="layui-form-label">选项A:</lable>
                                <div>
                                    <div class="layui-input-inline">
                                        <input type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
                                    </div>
                                </div>

                                <lable class="layui-form-label">选项B:</lable>
                                <div>
                                    <div class="layui-input-inline">
                                        <input type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                            </div>


                            <div class="layui-form-item">
                                <lable class="layui-form-label">选项C:</lable>
                                <div>
                                    <div class="layui-input-inline">
                                        <input type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
                                    </div>
                                </div>

                                <lable class="layui-form-label">选项D:</lable>
                                <div>
                                    <div class="layui-input-inline">
                                        <input type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                            </div>

                            <hr>

                            <div class="layui-form-item">
                                <lable class="layui-form-label">答案:</lable>
                                <div>
                                    <div class="layui-input-inline">
                                        <input type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                            </div>

                            <div class="layui-form-item layui-form-text">
                                <label class="layui-form-label">本题解析</label>
                                <div class="layui-input-block">
                                    <textarea name="desc" placeholder="请输入题目解析内容" class="layui-textarea"></textarea>
                                </div>
                            </div>

                            <div class="layui-form">
                                <div class="layui-input-block">
                                    <button class="layui-btn" lay-submit><i class="layui-icon">&#xe61f;</i>添加</button>
                                </div>
                            </div>
                        </form>

                    </div>
                    <!--多选题div-->
                    <div class="layui-tab-item">

                        <form class="layui-form">

                            <div class="layui-form-item">
                                <lable class="layui-form-label">题干:</lable>
                                    <div class="layui-input-block">
                                        <input type="text" name="title" required  lay-verify="required" placeholder="请输入题目" autocomplete="off" class="layui-input">
                                    </div>
                            </div>


                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <input class="layui-input-inline" type="checkbox" name="like[write]" title="选项1" lay-skin="primary">
                                    <input type="text" class="layui-input" placeholder="输入选项,并请将正确的选项勾选上." >
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <input type="checkbox" name="like[write]" title="选项2" lay-skin="primary">
                                    <input type="text" class="layui-input" placeholder="输入选项,并请将正确的选项勾选上." >
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <input type="checkbox" name="like[write]" title="选项3" lay-skin="primary">
                                    <input type="text" class="layui-input" placeholder="输入选项,并请将正确的选项勾选上." >
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <input type="checkbox" name="like[write]" title="选项4" lay-skin="primary">
                                    <input type="text" class="layui-input" placeholder="输入选项,并请将正确的选项勾选上." >
                                </div>
                            </div>

                            <div class="layui-form-item">

                                <button class="layui-btn"><i class="layui-icon">&#xe61f;</i>添加选项</button>
                            </div>

                            <hr>

                            <div class="layui-form-item">
                                <label class="layui-form-label">本题解析:</label>
                                <div class="layui-input-block">
                                    <textarea class="layui-textarea" placeholder="请输入解析内容"></textarea>
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <div class="layui-input-inline">
                                    <button class="layui-btn" lay-submit><i class="layui-icon">&#xe61f;</i>添加</button>
                                </div>
                            </div>
                        </form>

                    </div>
                    <!--判断题div-->
                    <div class="layui-tab-item">

                        <form class="layui-form">

                            <div class="layui-form-item">

                                <lable class="layui-form-label">题干:</lable>
                                <div class="layui-input-block">
                                    <input type="text" name="title" required  lay-verify="required" placeholder="请输入题目" autocomplete="off" class="layui-input">
                                </div>

                                <lable class="layui-form-label">答案:</lable>
                                <div class="layui-input-block">
                                    <input type="checkbox" name="zzz" lay-skin="switch" lay-text="Yes|Not">
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">本题解析:</label>
                                <div class="layui-input-block">
                                    <textarea class="layui-textarea" placeholder="请输入解析内容"></textarea>
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button class="layui-btn" lay-submit><i class="layui-icon">&#xe61f;</i>添加</button>
                                </div>
                            </div>

                        </form>
                    </div>
                    <!--填空题div-->
                    <div class="layui-tab-item">
                        <form class="layui-form">

                            <div class="layui-form-item">
                                <label class="layui-form-label">题干:</label>
                                <div class="layui-input-block">
                                    <input type="text" class="layui-input" placeholder="请输入题干">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label" >答案:</label>
                                <div class="layui-input-inline" style="width: 300px">
                                    <input type="text" class="layui-input" placeholder="请输入答案,系统将根据答案自动生成填空题">
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">解析:</label>
                                <div class="layui-input-block">
                                    <textarea class="layui-textarea" placeholder="请输入本题解析"></textarea>
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button class="layui-btn"><i class="layui-icon">&#xe61f;</i>添加</button>
                                </div>
                            </div>
                        </form>

                    </div>
                    <!--简答题div-->
                    <div class="layui-tab-item">
                        <form class="layui-form">

                            <div class="layui-form-item">
                                <label class="layui-form-label">题干:</label>
                                <div class="layui-input-block">
                                    <input type="text" class="layui-input" placeholder="请输入题干">
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">答案:</label>
                                <div class="layui-input-block">
                                    <textarea class="layui-textarea" placeholder="请输入本题答案"></textarea>
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">解析:</label>
                                <div class="layui-input-block">
                                   <textarea class="layui-textarea" placeholder="请输入本题解析"></textarea>
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button class="layui-btn"><i class="layui-icon">&#xe61f;</i>添加</button>
                                </div>
                            </div>

                        </form>
                    </div>
                </div>

                <div class="layui-tab-content"></div>
            </div>


        </div>
    </div>


<!--横线-->
    <hr>


    <!-- 发布设置 -->
    <div class="layui-card">
        <div class="layui-card-header">
            <h2>发布设置</h2>
        </div>
        <div class="layui-card-body">

            <form class="layui-form">

                <!--第一行item-->
                <div class="layui-form-item">

                    <label class="layui-form-label">任务名称:</label>
                    <div class="layui-input-inline">
                        <input type="text" name="title" required  lay-verify="required" placeholder="请输入任务名称" autocomplete="off" class="layui-input">
                    </div>

                    <label class="layui-form-label">任务类型:</label>
                    <div class="layui-input-inline">
                        <select name="city" lay-verify="required">
                            <option value=""></option>
                            <option value="0">复习任务</option>
                            <option value="1">预习任务</option>
                            <option value="1">...</option>
                        </select>
                    </div>

                    <label class="layui-form-label">发布范围:</label>
                    <div class="layui-input-inline">
                        <select name="city" lay-verify="required">
                            <option value=""></option>
                            <option value="0">计科5161</option>
                            <option value="1">电信5161</option>
                            <option value="1">...</option>
                        </select>
                    </div>

                </div>

                <!--第二行item-->
                <div class="layui-form-item">
                    <label class="layui-form-label">发布时间:</label>
                    <div class="layui-input-inline">
                        <input type="text" id="test1" name="title" required  lay-verify="required" placeholder="选择发布时间" autocomplete="off" class="layui-input">
                    </div>

                    <label class="layui-form-label">截至时间:</label>
                    <div class="layui-input-inline">
                        <input type="text" id="test2" name="title" required  lay-verify="required" placeholder="选择截至时间" autocomplete="off" class="layui-input">
                    </div>

                </div>

                <!--提交与重置button-->
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>

            </form>








        </div>
    </div>


</body>

<script src="../layui/layui.js"></script>
<script>
    layui.use('form',function () {
        var form = layui.form;

        form.on('submit(formDemo)',function (data) {
            layui.msg(JSON.stringify(data.field));
            return false;
        });
    });


    layui.use('laydate',function () {
        var laydate = layui.laydate;

        laydate.render({
            elem: '#test1'
        });

        laydate.render({
            elem: '#test2'
        });

    });

    layui.use('element',function () {
        var element = layui.element;

    });

    layui.use('upload',function () {
        var upload = layui.upload;

        // 执行实例

        var uploadInst = upload.render({
            elem:'#upload',
            url:'/upload/',
            done:function (res) {
                // 上传完毕回调
            }
            ,error:function () {
                // 请求异步回调
            }
        });

    });

</script>

</html>